<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>后台管理</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <style>
    :root {
      --primary-color: #4e73df;
      --primary-hover: #3a56c4;
      --secondary-color: #858796;
      --light-color: #f8f9fc;
      --dark-color: #2e3a59;
      --border-color: #e3e6f0;
      --success-color: #1cc88a;
      --bg-color: #f8f9fc;
      --sidebar-width: 250px;
      --header-height: 80px;
      --transition-speed: 0.3s;
    }
    
    body {
      font-family: 'Nunito', 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
      background-color: var(--bg-color);
      margin: 0;
      padding: 0;
      overflow-x: hidden;
    }
    
    .admin-page {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }
    
    /* 头部样式 */
    .admin-page .header-box {
      height: var(--header-height);
      background-color: #fff;
      width: 100%;
      display: flex;
      align-items: center;
      padding: 0 30px;
      box-sizing: border-box;
      justify-content: space-between;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      position: relative;
      z-index: 100;
    }
    
    .logo-box img {
      height: 36px;
    }
    
    .header-box .user-box {
      display: flex;
      align-items: center;
    }
    
    .header-box .gray {
      font-weight: 500;
      font-size: 14px;
      color: var(--secondary-color);
      margin-left: 20px;
      display: flex;
      align-items: center;
      cursor: pointer;
      transition: color var(--transition-speed);
      padding: 8px 12px;
      border-radius: 6px;
    }
    
    .header-box .gray:hover {
      background-color: var(--light-color);
      color: var(--primary-color);
    }
    
    .header-box .gray span {
      margin-left: 8px;
    }
    
    /* 内容区域 */
    .admin-page .cont-box {
      display: flex;
      flex: 1;
      overflow: hidden;
    }
    
    /* 侧边栏样式 */
    .admin-page .sidebar {
      width: var(--sidebar-width);
      height: calc(100vh - var(--header-height));
      background: linear-gradient(180deg, var(--primary-color) 0%, #224abe 100%);
      padding: 20px 0;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
      position: relative;
      z-index: 99;
      transition: width var(--transition-speed);
      overflow-y: auto;
    }
    
    .admin-page .nav-link {
      display: flex;
      padding: 12px 20px;
      text-decoration: none;
      border-radius: 0;
      margin-bottom: 5px;
      align-items: center;
      font-weight: 500;
      font-size: 15px;
      color: rgba(255, 255, 255, 0.8);
      transition: all var(--transition-speed);
      position: relative;
      border-left: 4px solid transparent;
    }
    
    .admin-page .nav-link:hover {
      color: #fff;
      background-color: rgba(255, 255, 255, 0.1);
      border-left-color: rgba(255, 255, 255, 0.5);
    }
    
    .admin-page .nav-link.active {
      color: #fff;
      background-color: rgba(255, 255, 255, 0.15);
      border-left-color: #fff;
    }
    
    .admin-page .nav-link img {
      margin-right: 12px;
      width: 20px;
      height: 20px;
      filter: brightness(0) invert(1);
      opacity: 0.8;
    }
    
    .admin-page .nav-link.active img,
    .admin-page .nav-link:hover img {
      opacity: 1;
    }
    
    .nav-link span {
      flex: 1;
    }
    
    .nav-link .arrow {
      transition: transform var(--transition-speed);
    }
    
    .nav-link.active .arrow {
      transform: rotate(90deg);
    }
    
    /* 二级菜单样式 */
    .sub-category {
      margin-left: 0;
      padding-left: 20px;
      overflow: hidden;
      max-height: 0;
      transition: max-height var(--transition-speed);
    }
    
    .nav-item.active .sub-category {
      max-height: 200px;
    }
    
    .sub-category .nav-link {
      padding-left: 52px;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.7);
      border-left: 0;
    }
    
    .sub-category .nav-link:hover,
    .sub-category .nav-link.active {
      color: #fff;
      background-color: transparent;
    }
    
    .sub-category .nav-link::before {
      content: "";
      position: absolute;
      left: 40px;
      top: 50%;
      transform: translateY(-50%);
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.5);
    }
    
    .sub-category .nav-link:hover::before,
    .sub-category .nav-link.active::before {
      background-color: #fff;
    }
    
    /* 主内容区域 */
    .admin-page .main-content {
      flex: 1;
      background-color: var(--bg-color);
      overflow: hidden;
    }
    
    .iframe-styles {
      width: 100%;
      height: calc(100vh - var(--header-height));
      box-sizing: border-box;
      background-color: var(--bg-color);
      border: none;
      display: block;
    }
    
    /* 响应式设计 */
    @media (max-width: 992px) {
      .admin-page .sidebar {
        width: 70px;
      }
      
      .admin-page .sidebar:hover {
        width: var(--sidebar-width);
      }
      
      .nav-link span,
      .sub-category {
        display: none;
      }
      
      .admin-page .sidebar:hover .nav-link span,
      .admin-page .sidebar:hover .sub-category {
        display: block;
      }
    }
    
    /* 滚动条样式 */
    .sidebar::-webkit-scrollbar {
      width: 6px;
    }
    
    .sidebar::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.1);
    }
    
    .sidebar::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.3);
      border-radius: 3px;
    }
    
    .sidebar::-webkit-scrollbar-thumb:hover {
      background: rgba(255, 255, 255, 0.5);
    }
  </style>
</head>
<body class="admin-page">
<!-- 头部 -->
<div class="header-box">
  <!-- logo -->
  <div class="logo-box">
    <img src="./pic/logo.png" alt="Logo">
  </div>
  <!-- 用户信息 -->
  <div class="user-box">
    <div class="gray" onclick="logout()">
      <i class="fas fa-sign-out-alt"></i>
      <span>退出登录</span>
    </div>
  </div>
</div>
<div class="cont-box">
  <!-- 侧边栏 -->
  <div class="sidebar">
    <ul class="nav flex-column">
      <li class="nav-item active">
        <div class="nav-link active huodong">
          <i class="fas fa-fw fa-calendar-alt"></i>
          <span>活动管理</span>
          <i class="fas fa-fw fa-angle-down arrow"></i>
        </div>
        <ul class="nav flex-column sub-category">
          <li><a class="nav-link" id="activitiesList" data-desc="huodong" href="activities-list2.html">活动列表</a></li>
          <li><a class="nav-link" id="createActivity" data-desc="huodong" href="create-activity.html">新建抽奖活动</a></li>
        </ul>
      </li>
      <li class="nav-item">
        <div class="nav-link jiangpin">
          <i class="fas fa-fw fa-gift"></i>
          <span>奖品管理</span>
          <i class="fas fa-fw fa-angle-down arrow"></i>
        </div>
        <ul class="nav flex-column sub-category">
          <li><a class="nav-link" data-desc="jiangpin" href="prizes-list.html">奖品列表</a></li>
          <li><a class="nav-link" data-desc="jiangpin" href="create-prizes.html">创建奖品</a></li>
        </ul>
      </li>
      <li class="nav-item">
        <div class="nav-link renyuan">
          <i class="fas fa-fw fa-users"></i>
          <span>人员管理</span>
          <i class="fas fa-fw fa-angle-down arrow"></i>
        </div>
        <ul class="nav flex-column sub-category">
          <li><a class="nav-link" id="userList" data-desc="renyuan" href="user-list.html">人员列表</a></li>
          <li><a class="nav-link" id="register" data-desc="renyuancreate" href="register.html">注册用户</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <!-- 内容区域 -->
  <div class="main-content">
    <!-- 内容将根据点击的导航项动态加载 -->
    <iframe id="contentFrame" src="activities-list2.html" class="iframe-styles"></iframe>
  </div>
</div>

<!-- 引入jQuery和Bootstrap的JavaScript -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  // 监听子message事件,实现子页面向父页面传递
  window.addEventListener('message', function(e){
    console.log('子页面传递的数据', e.data)
    if(e.data && e.data.from){
      var pages = e.data.from+'?param=' +  new Date().getTime()
      $('#contentFrame').attr('src', pages);
      let id = e.data.id
      // 移除所有链接的激活样式
      $('ul.nav .nav-link').removeClass('active');
      // 为当前点击的链接添加激活样式
      $(id).addClass('active');
      $(id).closest('.nav-item').addClass('active');
    }
  }, false);

  // 导航点击事件处理
  $('ul.nav a').on('click', function(event) {
    // 阻止链接默认的导航行为，这样页面不会跳转到href属性指定的URL。
    event.preventDefault();
    // 移除所有链接的激活样式
    $('ul.nav .nav-link').removeClass('active');
    // 为当前点击的链接添加激活样式
    $(this).addClass('active');
    // 选中二级菜单时默认选中对应的一级菜单
    $(this).closest('.nav-item').addClass('active');

    // 生成一个随机参数（时间戳） 解决iframe缓存问题
    var randomParam = new Date().getTime();
    // 获取当前点击的链接的data-desc属性值
    var dataDesc = $(this).data('desc');
    var page = '';
    if (dataDesc === "renyuancreate") {
      page = $(this).attr('href') + "?param=" + randomParam + "&jumpList=true&admin=false";
    } else {
      page = $(this).attr('href') + "?param=" + randomParam;
    }
    $('#contentFrame').attr('src', page);
  });

  // 一级菜单点击事件
  $('.nav-item > .nav-link').on('click', function(e) {
    e.preventDefault();
    $(this).parent().toggleClass('active');
    $(this).find('.arrow').toggleClass('fa-angle-down fa-angle-up');
  });

  // 确保默认情况下第一个链接是激活状态
  $(document).ready(function() {
    // 选取页面中第一个<ul>元素下，具有class="nav"的<a>元素
    // ul.nav 是侧边栏导航的类名
    // active类 定义了导航项被激活或选中的状态
    $('ul.nav a:first').addClass('active');
  });

  // 退出登录
  function logout(){
    localStorage.removeItem("user_token")
    location.href="/blogin2.html"
  }
</script>
</body>
</html>